<template>
  <div class="navModule-wrapper">
    <div class="nav-content">
      <loading></loading>
      <el-row justify="end">
          <el-col :span="24">
            <el-button type="primary" class="w-200 " @click="addModelFlag = true"
              >新 增</el-button
            >
          </el-col>
        </el-row>
      <div class="nav-search-wrapper">
        <el-row class="center-wh">
          <el-col class="search-item" :span="5" v-for="(item, index) in searchList" :key="item.id">
            <el-input
              v-model="input"
              :placeholder="`请输入${item.text}`"
            ></el-input
          ></el-col>
          <el-col :span="4">
            <el-button type="primary" class="search-btn w-100">搜 索</el-button>
            <el-button  class="w-100">重 置</el-button></el-col
          >
        </el-row>
      </div>
      <div class="nav-list-content">
        <div class="nav-list">
          <el-table
            :data="tableData"
            style="width: 100%"
            :row-class-name="tableRowClassName"
          >
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址"> </el-table-column>
          </el-table>
        </div>
        <div class="nav-pager">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[30, 60, 90, 120]"
            :page-size="30"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <addModel :addModelFlag="addModelFlag" @isShow="isCloseAddFN"></addModel>
  </div>
</template>

<script>
// 接口调用
import { test, getNavList,getFilesNameList } from "../../api";
// 新增组件
import addModel from "./components/addModel.vue";
import {tableRowClassName1} from '../../common/js/elUIReset';
export default {
  name: "navModule",
  components: { addModel },
  props: [],
  data() {
    return {
      addModelFlag: true, //新增弹窗
      input: "",
      searchOptionList: [
        {
          id: "name",
          value: "name",
          order: 2,
          text: "名称",
        },
        {
          id: "class",
          value: "class",
          order: 3,
          text: "分类",
        },
        {
          id: "collect",
          value: "collect",
          order: 4,
          text: "收藏",
        },
        {
          id: "files",
          value: "files",
          order: 1,
          text: "文件夹",
        },
      ],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          tag: "家",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄",
          zip: 200333,
          tag: "公司",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄",
          zip: 200333,
          tag: "公司",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄",
          zip: 200333,
          tag: "公司",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄",
          zip: 200333,
          tag: "公司",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄",
          zip: 200333,
          tag: "公司",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄",
          zip: 200333,
          tag: "公司",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1519 弄",
          zip: 200333,
          tag: "家",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1516 弄",
          zip: 200333,
          tag: "公司",
        },
      ],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      tableRowClassName:null
    };
  },
  computed: {
    searchList() {
      // 根据order进行排序
      return this.searchOptionList.sort((a, b) => {
        return a.order - b.order;
      });
    },
  },
  created() {
    // 表格行样式配置
    this.tableRowClassName = tableRowClassName1;
  },
  mounted() {
    // test()
    // getNavList()
    // getFilesNameList()
  },
  methods: {
    isCloseAddFN(val){
      this.addModelFlag = false;
      if(val){//数据发生更新，重新查询列表

      }
    },
    openAddModelFn() {
      this.addModelFlag != this.addModelFlag;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    
  },
};
</script>

<style lang="scss" scoped>
.center-wh{
  display: flex;
  align-items: center;
}
.navModule-wrapper {
  width: 100%;
  height: 100vh;
  padding: 20px;
  // background-color: #ddd;
  box-sizing: border-box;
}
.nav-search-wrapper{
  background-color: rgba($color: #000000, $alpha: .5);
  box-sizing: border-box;
  padding: 15px;
  margin: 15px 0; 
  border-radius: 4px;
  box-shadow: 5px 5px 5px #aaa ;
  &:hover{
    box-shadow: 1px 1px 10px #666 ;
    transition:box-shadow .5s ease-in-out;
  }
}
.search-btn{
  margin-right: 15px;
  margin-left: 30px;
  
}
.search-item{
  box-sizing: border-box;
  padding: 5px;
}
.nav-list-content{
  background-color: #fff;
  box-sizing: border-box;
  padding: 15px;
  margin: 15px 0; 
  border-radius: 4px;
  box-shadow: 5px 5px 5px #aaa ;
  &:hover{
    box-shadow: 1px 1px 10px #666 ;
    transition:box-shadow .5s;
  }
  .nav-list{
    padding: 0 0 15px 0;
  }
}
</style>
